<template>
  <!-- 订单填写报告 -->
  <div id="write"></div>
</template>
<script>
import { onMounted, inject } from "vue";
// echarts图
// import * as echarts from "echarts";
export default {
  props: {
    // 已填写报告
    haveNursingReportPercentage: {
      type: Number,
      default: 0,
    },
    // 未填写报告
    noHaveNursingReportPercentage: {
      type: Number,
      default: 0,
    },

    // 已审核
    checkNursingReportPercentage: {
      type: Number,
      default: 0,
    },

    // 未审核
    noCheckNursingReportPercentage: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    // console.log(props, "护理报告接收参数是");
    const echarts = inject("echarts");

    let chartInstance = null;
    const colorList = ["#088A29", "#FACC2E"];

    // 是否未填报告数据
    let isWriteData = [
      { value: props.noHaveNursingReportPercentage, name: "未填报告" },
      { value: props.haveNursingReportPercentage, name: "已填报告" },
    ];
    // 是否审核报告数据
    let isAuditData = [
      { value: props.noCheckNursingReportPercentage, name: "未审核" },
      { value: props.checkNursingReportPercentage, name: "已提交" },
    ];

    // 待接单、已接单、已完成echarts图
    const initEcharts = () => {
      chartInstance = echarts.init(document.getElementById("write"), "chalk");
      // 绘制图表
      chartInstance.setOption({
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "订单情况",
          textStyle: {
            // color:"#E6E6E6"
          },
        },
        legend: {
          bottom: 10,
          left: "center",
        },
        series: [
          {
            name: "报告填写情况",
            type: "pie",
            radius: ["55%", "65%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{b}:\n{d}%",
              textStyle: {
                //   color:'pink'
              },
            },
            itemStyle: {
              // color: (params) => {
              //     return colorList[params.dataIndex]
              // }
            },
            data: isWriteData,
            left: "5%",
            right: "50%",
            top: 0,
            bottom: 0,
          },
          {
            type: "pie",
            radius: ["55%", "65%"],
            center: ["50%", "50%"],
            data: isAuditData,
            label: {
              show: true,
              formatter: "{b}:\n{d}%",
            },
            left: "55%",
            right: 0,
            top: 0,
            bottom: 0,
          },
        ],
      });
    };

    const screenAdapter = () => {
      const adapterOption = {};
      chartInstance.setOption(adapterOption);
      chartInstance.resize();
    };

    onMounted(() => {
      // 初始化图表
      initEcharts();
      // 适配图表
      screenAdapter();
      window.addEventListener("resize", screenAdapter);
    });
    return {};
  },
};
</script>
<style scoped lang="less">
#write {
  width: 100%;
  // height: 300px;
  height: 100%;
}
</style>
